<script setup>
import { defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue';

const title = ref('hello')

const AlertBox = defineAsyncComponent(() => import('@/components/cpts/AlertBox.vue'))

const x =ref(0)
const y =ref(0)


function update(event){
    x.value = event.pageX
    y.value = event.pageY
}

onMounted(() => {
    window.addEventListener('mousemove',update)
})

onUnmounted(() => {
    window.removeEventListener('mousemove',update)
})


const vHighlight = {
  mounted: (el) => {
    el.classList.add('is-highlight')
  }
}

</script>

<template>
    <h1>VueAsync</h1>

    <p v-highlight>demo</p>

    <div>Mouse position is at: {{ x }}, {{ y }}</div>
    
    <AlertBox>
        hello
    </AlertBox>
</template>

<style scoped>
</style>